<template>
	<view class="my_page">
		
		<puplic-nav titleTxt="我的" :flag="isFlag" @update:puplicNavHeight='getPuplicNavHeight' />
		
		<view class="my_banner_box" :style="`padding-top: ${puplicnavHeight}px`">
			<view class="mt24 re" style="z-index: 2;">
				<div class="df fldc aic">
					<image src="@/static/images/banner_01.png" class="header_pic"></image>
					<view class="my_name">Advens</view>
				</div>
			</view>
			<!-- <image class=""></image> -->
		</view>
		
		<view class="my_content_page">
			
			<view class="my_area_block_1 flex_box aic tac">
				
				<view class="item ov">
					<view class="fs48">588</view>
					<view class="fwb">购买订单</view>
				</view>
				<view class="line_1"></view>
				<view class="item ov">
					<view class="fs48">722</view>
					<view class="fwb">回收订单</view>
				</view>
				<view class="line_1"></view>
				<view class="item ov">
					<view class="fs48">32</view>
					<view class="fwb">游戏库</view>
				</view>
				
			</view>
			
			<view class="my_area_block_2">
				<view class="re df fw" style="margin-top: -20rpx;">
					
					<view class="wp25 mt20 df aic fldc">
						<image src="@/static/images/icon_my_m_1.png" class="icon_func_size"></image>
						<view class="func_name">心愿单</view>
					</view>
					
					<view class="wp25 mt20 df aic fldc">
						<image src="@/static/images/icon_my_m_2.png" class="icon_func_size"></image>
						<view class="func_name">评价中心</view>
					</view>
					
					<view class="wp25 mt20 df aic fldc">
						<image src="@/static/images/icon_my_m_3.png" class="icon_func_size"></image>
						<view class="func_name">地址管理</view>
					</view>
					
					<view class="wp25 mt20 df aic fldc">
						<image src="@/static/images/icon_my_m_4.png" class="icon_func_size"></image>
						<view class="func_name">优惠券</view>
					</view>
					
					<view class="wp25 mt20 df aic fldc">
						<image src="@/static/images/icon_my_m_4.png" class="icon_func_size"></image>
						<view class="func_name">我的质保</view>
					</view>
					
				</view>
			</view>
			
			<view class="mt48">
				<view class="txt_hor_sty">
					<view class="txt_1">常见功能</view>
				</view>
			</view>
			
			<view class="mt24 my_area_block_3">
				
				<view class="pt32 pb32 bb2 flex_box aic">
					<view class="re mr15"><image src="@/static/images/icon_my_01.png" class="img_5 vm"></image></view>
					<view class="item ov"><view class="fs28 cor_333">意见反馈</view></view>
					<image src="@/static/images/icon_arw_2.png" class="ml10 img_4"></image>
				</view>
				
				<view class="pt32 pb32 bb2 flex_box aic">
					<view class="re mr15"><image src="@/static/images/icon_my_02.png" class="img_5 vm"></image></view>
					<view class="item ov"><view class="fs28 cor_333">常见问题</view></view>
					<image src="@/static/images/icon_arw_2.png" class="ml10 img_4"></image>
				</view>
				
				<view class="pt32 pb32 bb2 flex_box aic">
					<view class="re mr15"><image src="@/static/images/icon_my_03.png" class="img_5 vm"></image></view>
					<view class="item ov"><view class="fs28 cor_333">合作咨询</view></view>
					<image src="@/static/images/icon_arw_2.png" class="ml10 img_4"></image>
				</view>
				
				<view class="pt32 pb32 flex_box aic">
					<view class="re mr15"><image src="@/static/images/icon_my_04.png" class="img_5 vm"></image></view>
					<view class="item ov"><view class="fs28 cor_333">退出登录</view></view>
					<image src="@/static/images/icon_arw_2.png" class="ml10 img_4"></image>
				</view>
				
			</view>
			
		</view>
		
		
	</view>
</template>

<script setup>
	
	import {ref, reactive} from 'vue';
	import { onLoad, onShow, onPageScroll } from "@dcloudio/uni-app";
	import PuplicNav from '@/components/puplicNav/index.vue';
	
	const isFlag = ref(false); //控制自定义导航栏背景色
	const puplicnavHeight = ref(0);
	
	const getPuplicNavHeight = (val) => {
		puplicnavHeight.value = val;
	};
	
	onPageScroll((e) => {
		if(e.scrollTop >= 80) {
			isFlag.value = true;
		}else {
			isFlag.value = false;
		}
	});
	
</script>

<style lang="scss" scoped>
	
	.my_page {
		position: relative;
		min-height: 100vh;
		background: rgba(255,201,150,0.2);
		padding-bottom: calc(30rpx + content(safe-area-inset-bottom));
		padding-bottom: calc(30rpx + env(safe-area-inset-bottom));
		.my_banner_box {
			position: relative;
			height: 526rpx;
			background: linear-gradient( 42deg, rgba(245,34,15,0.8) 0%, #F5220F 100%);
			.header_pic {
				position: relative;
				width: 120rpx;
				height: 120rpx;
				border-radius: 50%;
			}
			.my_name {
				position: relative;
				font-size: 36rpx;
				line-height: 50rpx;
				font-weight: bold;
				color: #fff;
				margin-top: 10rpx;
			}
		}
		.my_content_page {
			position: relative;
			padding: 0 32rpx;
			margin-top: -120rpx;
			.my_area_block_1 {
				position: relative;
				height: 160rpx;
				font-size: 28rpx;
				color: #fff;
				border-radius: 24rpx;
				background: rgba(255,255,255,.2);
				border: 1px solid #FFFFFF;
				box-shadow: 0px 4rpx 35rpx rgba(255,255,255,.5);
				backdrop-filter: blur(20px);
				.line_1 {
					position: relative;
					width: 1px;
					height: 40rpx;
					background: #fff;
				}
			}
			.my_area_block_2 {
				position: relative;
				padding: 48rpx 0;
				background: #FFFFFF;
				box-shadow: 0px 16rpx 50rpx  #F5E9E9;
				border-radius: 26rpx;
				margin-top: 48rpx;
				.icon_func_size {
					position: relative;
					width: 96rpx;
					height: 96rpx;
					vertical-align: middle;
				}
				.func_name {
					position: relative;
					font-size: 24rpx;
					line-height: 32rpx;
					color: #6F7278;
					margin-top: 12rpx;
				}
			}
			.my_area_block_3 {
				position: relative;
				padding: 12rpx 52rpx;
				background: #FFFFFF;
				border-radius: 20rpx;
				box-shadow: 0px 16rpx 50rpx  #F5E9E9;
			}
		}
	}

</style>
